<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>deui-bar-tab</title>
    <link rel="stylesheet" href="../../css/deui.css">
    <link rel="stylesheet" href="../../css/bar-tab/deui-tab-bar.css">
</head>

<body>
    <div id="vm">
        <footer class="deui-bar-tab" id="footer">
            <div class="deui-bar-tab-item" v-bind:class="{deui_active: item.active}" @click=switchbarclick(item) v-for="item in deuibarlists">
                <img v-if="item.active" v-bind:src="item.icon_a" alt="">
                <img v-else v-bind:src="item.icon" alt="">
                <div class="deui-bar-text">{{item.deuibarname}}</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../../js/vue.2.5.js"></script>
<!-- <script src="http://code.jquery.com/jquery-1.4.1.js"></script> -->
<script>
    var vm = new Vue({
        el: '#vm',
        data: {
            deuibarlists: [{
                icon_a:'../../image/home_active.png',
                icon:'../../image/home.png',
                deuibarname: '首页',
                active: true
            }, {
                icon_a:'../../image/collect_active.png',
                icon:'../../image/collect.png',
                deuibarname: '收藏',
                active: false
            }, {
                icon_a:'../../image/shop_active.png',
                icon:'../../image/shop.png',
                deuibarname: '购物车',
                active: false
            }, {
                icon_a:'../../image/my_active.png',
                icon:'../../image/my.png',
                deuibarname: '我的',
                active: false
            }]
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
            }
        },
        methods: {
            init: function() {
                var _this = this;
            },
            switchbarclick: function(ret) {
                var _this = this;
                if (ret.active == false) {
                    this.deuibarlists.map(function(ret, index) {
                        ret.active = false;
                    })
                    ret.active = true;
                }
            },
        }
    })
</script>

</html>
